<template>
<div class="d1">
  <table cellspacing="0" cellpadding="0">  
<tr>  
<td>  
<table cellspacing="0" cellpadding="0">  
<tr>  
<td>  
<h1>404</h1>  
<h3>大事不妙啦！</h3>  
<p>你访问的页面正在努力开发中~<br/>  
<span class="s1" v-model="i">{{i}}</span><span>秒自动返回首页</span> &nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;
<router-link to="" @click.native="goBack">立即返回</router-link>  
</p>  
</td>  
</tr>  
</table>  
</td>  
</tr>  
</table>  
<div class="d2">
  
</div>
</div>
</template>
<script>
import { Indicator } from 'mint-ui';
export default {
  data:function(){
    return{
      i:5,
      timer:null
    }
  },
 created(){
    this.fanhui();
  },
 beforeRouteLeave (to, from, next) {
    clearInterval(this.timer) //清楚定时器
 next()
},
  methods:{
    goBack(){
       this.$router.go(-1);
     },
    fanhui(){
      this.timer=setInterval(()=>{
        this.i--;
        if(this.i<=0){
          clearInterval(this.timer);
          this.$router.push("/home");
        }
     },1000)
    },
    
  }
}
</script>
<style scoped>
  *{font-family:"Microsoft Yahei";margin:0;font-weight:lighter;text-decoration:none;text-align:center;line-height:2.2em;}  
html,body{
  height:100%;
}  
h1{font-size:70px;line-height:1em;color:#00cc7d;}  
table{width:100%;height:100%;border:0;}  

a{
  background-color: #00cc7d;
  color: #fff;
  font-size: 1.5rem;
  line-height: 20px;
  margin-top: 20px;
 }
 .d2{
   background: url(../assets/img/timg.jpg);
   width: 100%;
   height: 250px;
   background-repeat: round;
 }
 .s1{
   font-size: 2rem;
   color: red;
 }
</style>


